import React from "react";
import {
  PickerIOS,
  DatePickerIOS,
  DatePickerAndroid,
  View,
  Picker,
  PickerItem,
  TouchableOpacity,
  Text
} from "react-native";

import Platform from "Platform";
import TComponent from "./TComponent";
import SizeUtils from "../common/SizeUtils";

var PickerItemIOS = PickerIOS.Item;

export default class TPicker extends TComponent {
  constructor(props) {
    super(props);

    if (this.props.type == "date") {
      this.state.selectedValue = new Date();
    } else {
      this.state.selectedValue = this.props.pickerData[0];
      this.state.selectedValue1 =
        (this.props.pickerData2 && this.props.pickerData2[0]) || "";
    }
  }

  render() {
    return (
      <View
        style={{
          position: "absolute",
          width: SizeUtils.getWindowSize().width,
          bottom: 0,
          backgroundColor: "#ffffff",
          height: this._getHeight()
        }}
      >
        <View
          style={{
            height: SizeUtils.translateDesignHeightToCode(80),
            borderTopWidth: SizeUtils.translateDesignNumToCode(5),
            borderBottomWidth: SizeUtils.translateDesignNumToCode(5),
            backgroundColor: "#eeeeee22",
            borderColor: "#eeeeee",
            flexDirection: "row",
            justifyContent: "space-around"
          }}
        >
          {this._renderCancel()}
          {this._renderTitle()}
          {this._renderDone()}
        </View>
        {this._renderPickerIOS()}
      </View>
    );
  }

  _getHeight() {
    return SizeUtils.translateDesignHeightToCode(500);
  }

  _renderPickerIOS() {
    if (this.props.type == "date") {
      if (Platform.OS === "ios") {
        return (
          <DatePickerIOS
            date={this.state.selectedValue}
            mode="date"
            onDateChange={value => this._onValueChange(value)}
          />
        );
      } else {
        return (
          <DatePickerAndroid
            date={this.state.selectedValue}
            mode="date"
            onDateChange={value => this._onValueChange(value)}
          />
        );
      }
    } else {
      if (Platform.OS === "ios") {
        return (
          <View style={{ flexDirection: "row", flex: 1 }}>
            <PickerIOS
              style={{ flex: 1, backgroundColor: "#ffffff00" }}
              selectedValue={this.state.selectedValue}
              onValueChange={value => this._onValueChange(value)}
            >
              {this.props.pickerData.map((item, index) => {
                return this._renderItem(item, index);
              })}
            </PickerIOS>
            {this.props.pickerData2 ? (
              <PickerIOS
                style={{ flex: 1, backgroundColor: "#ffffff00" }}
                selectedValue={this.state.selectedValue1}
                onValueChange={value => this._onValueChange1(value)}
              >
                {this.props.pickerData2.map((item, index) => {
                  return this._renderItem(item, index);
                })}
              </PickerIOS>
            ) : null}
          </View>
        );
      } else {
        return (
          <Picker
            style={{ backgroundColor: "#ffffff00" }}
            selectedValue={this.state.selectedValue}
            mode="dropdown"
            onValueChange={value => this._onValueChange(value)}
          >
            {this.props.pickerData.map((item, index) => {
              return this._renderItem(item, index);
            })}
          </Picker>
        );
      }
    }
  }

  _renderCancel() {
    return (
      <TouchableOpacity
        style={{
          width: SizeUtils.translateDesignWidthToCode(100),
          justifyContent: "center",
          alignItems: "center"
        }}
        onPress={this._onPressCancel.bind(this)}
      >
        <Text style={{ fontSize: SizeUtils.translateFontSizeToCode(30) }}>
          取消
        </Text>
      </TouchableOpacity>
    );
  }

  _onPressCancel() {
    this.props.onClose();
  }

  _renderTitle() {
    return (
      <View
        style={{
          width: SizeUtils.translateDesignWidthToCode(300),
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <Text style={{ fontSize: SizeUtils.translateFontSizeToCode(30) }}>
          请选择
        </Text>
      </View>
    );
  }

  _renderDone() {
    return (
      <TouchableOpacity
        style={{
          width: SizeUtils.translateDesignWidthToCode(100),
          justifyContent: "center",
          alignItems: "center"
        }}
        onPress={this._onPressDone.bind(this)}
      >
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(30),
            color: "#db3132"
          }}
        >
          确定
        </Text>
      </TouchableOpacity>
    );
  }

  _onPressDone() {
    this.props.onClose(this.state.selectedValue, this.state.selectedValue1);
  }

  _getDataByValue(value) {
    // if(this.props.type == "date") {
    //
    // }
    // else {
    //   for (var i = 0; i < this.props.pickerData.length; i++) {
    //     if(value.key === this.props.pickerData[i].key) {
    //       return this.props.pickerData[i];
    //     }
    //   }
    // }
    return value;
  }

  _onValueChange(value) {
    this.setState({ selectedValue: this._getDataByValue(value) });
  }
  _onValueChange1(value) {
    this.setState({ selectedValue1: this._getDataByValue(value) });
  }
  _renderItem(item, index) {
    let label = item;
    if (this.props.extends1 != null && this.props.extends1 != undefined) {
      label += this.props.extends1;
    }
    if (Platform.OS === "ios") {
      return <PickerItemIOS key={index} value={item} label={label} />;
    } else {
      return <Picker.Item key={index} value={item} label={label} />;
    }
  }
}
